import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from "../store"
import {
  toast
} from "../utils/toast";

Vue.use(VueRouter)

const routes = [{
    path: '/',
    component: Home
  },
  {
    path: '/hone',
    name: 'Home',
    component: Home
  },
  {
    path: '/allgoods',
    name: 'AllGoods',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../views/AllGoods.vue')
  },
  {
    path: '/myorders',
    name: 'MyOrders',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../views/MyOrders.vue')
  }, {
    path: '/personal',
    name: 'Personal',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../views/Personal.vue'),
    // 如果进入一个父路由，想要自动跳转到其中一个子路由
    redirect:'/personal/user',

    children: [{
        path: '/personal/cart', // 完整写法
        // path:'cart', // 简单写法
        name: 'Cart',
        component: () => import( /* webpackChunkName: "cart" */ '../components/personal/Cart.vue'),
      },
      {
        path: '/personal/user',
        name: 'User',
        component: () => import( /* webpackChunkName: "cart" */ '../components/personal/User.vue'),
      }
    ]
  }, 
  // {
  //   path: '/frees',
  //   name: 'Frees',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import( /* webpackChunkName: "about" */ '../views/Frees.vue')
  // },
  {
    path: '/goodgetail',
    name: 'GoodDetail',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../components/hone/GoodDetail.vue')
  },
  {
    path: '*',// 匹配任何路径 -- 一般可以用来做 404 页面
    component: () => import(  '../views/NotFound.vue')
  },


]

const router = new VueRouter({
  // 路由的历史模式还是哈希模式，取决于这个地方使用的 mode
  // vue-router 默认其实是 哈希模式，我们之前在使用vue-cli 创建的时候，选择了 历史模式，所以生成的 index.js mode 是 history
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断是否已经登录，如果登录才可以访问 personal,myorders
  // 如果访问的是person 或者 myorders
  const personal = /\/personal/
  const myorders = /\/myorders/
  if (myorders.test(to.path) || personal.test(to.path)) {
    // 条件1：token 是否存在
    // 条件2：token 是否过期
    const token = localStorage.getItem("x-auth-token");
    if (!token) {
      return toast('请先登录', "warnning")
    }
    // 两种做法：2.1 vuex 里面没有userInfo的内容
            //  2.2 在每次登录成功后，都存一个过期时间在 localStorage 里面
    // if (!store.state.userInfo.username) {
    //   return toast('登录状态失效', "warnning")
    // }
  }
  next()
})

export default router